﻿<template>
  <XenListPage
    title="访客信息"
    :dataList="visitorList"
    :visibleFields="visibleFields"
    :filterFields="filterFields"
    :actions="actions"
    :themeConfig="themeConfig"
    :loading="loading"
    :enableAutoRefresh="false"
    :enableSilentRefresh="true"
    :silentRefreshFn="silentRefreshFn"
    searchPlaceholder="点击筛选访客信息"
    emptyText="暂无访客信息"
    emptyDesc="点击右上角添加访客信息"
    createPagePath="/subpkg-newvisitor/visitor/sysvisitorinformation/create"
    detailPagePath="/subpkg-newvisitor/visitor/sysvisitorinformation/details"
    editPagePath="/subpkg-newvisitor/visitor/sysvisitorinformation/edit"
    permission-module="sysvisitorinformation"
    @delete="handleDelete"
    @filter="handleFilter"
    @refresh="handleRefresh"
    @silent-refresh="handleSilentRefresh"
  >
    <!-- 自定义插槽图标 -->
    <template #search-icon>
      <uni-icons type="search" size="18" color="#999"></uni-icons>
    </template>
    <template #add-icon>
      <uni-icons type="plus" size="18" color="#ffffff"></uni-icons>
    </template>
    <template #loading-icon>
      <uni-icons type="spinner-cycle" size="24" color="#666"></uni-icons>
    </template>
    <template #empty-icon>
      <uni-icons type="info" size="48" color="#ccc"></uni-icons>
    </template>
    <template #action-icon-delete>
      <uni-icons type="trash" size="16" color="#FF5252"></uni-icons>
    </template>
    <template #action-icon-edit>
      <uni-icons type="compose" size="16" color="#4CAF50"></uni-icons>
    </template>
    <template #action-icon-view>
      <uni-icons type="eye" size="16" color="#7881de"></uni-icons>
    </template>
  </XenListPage>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import XenListPage from "@/layouts/XenListPage.vue";
import SysvisitorinformationApi from "./api/index";
import type {
  ISysVisitorInformationView,
  ISysVisitorInformationQuery,
} from "./api/interface";

// 创建API实例
const api = SysvisitorinformationApi();

// 主题配置
const themeConfig = {
  primaryColor: "#7881de",
  secondaryColor: "#764ba2",
  gradientStart: "#667eea",
  gradientEnd: "#764ba2",
};

// 定义列表显示字段
// 按要求显示：姓名、手机号、身份证号、所属单位/公司、车牌号、绑定用户、备注信息
const visibleFields = [
  { key: "Name", label: "姓名" },
  { key: "Phone", label: "手机号" },
  { key: "IdCardNo", label: "身份证号" },
  { key: "Company", label: "所属单位/公司" },
  { key: "CarNo", label: "车牌号" },
  {
    key: "User",
    label: "绑定用户",
    formatter: (value: any) => {
      return value?.Name || "未绑定";
    },
  },
  { key: "Remark", label: "备注信息" },
];

// 定义搜索筛选字段
const filterFields = [
  { key: "name", label: "姓名", placeholder: "请输入姓名" },
  { key: "phone", label: "手机号", placeholder: "请输入手机号" },
  { key: "idCardNo", label: "身份证号", placeholder: "请输入身份证号" },
  {
    key: "company",
    label: "所属单位/公司",
    placeholder: "请输入所属单位/公司",
  },
  { key: "carNo", label: "车牌号", placeholder: "请输入车牌号" },
  {
    key: "blackStatus",
    label: "黑名单状态",
    type: "select",
    options: [
      { label: "全部", value: "" },
      { label: "正常", value: false },
      { label: "黑名单", value: true },
    ],
  },
];

// 定义操作按钮
const actions = [
  {
    key: "delete",
    label: "删除",
    icon: "trash",
    color: "#FF5252",
    class: "delete-btn",
  },
  {
    key: "edit",
    label: "编辑",
    icon: "compose",
    color: "#4CAF50",
    class: "edit-btn",
  },
  {
    key: "view",
    label: "查看",
    icon: "eye",
    color: "#7881de",
    class: "view-btn",
  },
];

// 访客列表数据
const visitorList = ref<ISysVisitorInformationView[]>([]);

// 处理筛选
const handleFilter = async (filterParams: Record<string, any>) => {
  loading.value = true;
  try {
    // 构建查询参数，映射到API接口需要的字段
    const queryParams: ISysVisitorInformationQuery = {};

    // 根据筛选参数构建查询对象
    if (filterParams.name) {
      queryParams.Name = filterParams.name;
    }
    if (filterParams.phone) {
      queryParams.Phone = filterParams.phone;
    }
    if (filterParams.idCardNo) {
      queryParams.IdCardNo = filterParams.idCardNo;
    }
    if (filterParams.company) {
      queryParams.Company = filterParams.company;
    }
    if (filterParams.carNo) {
      queryParams.CarNo = filterParams.carNo;
    }
    if (
      filterParams.blackStatus !== undefined &&
      filterParams.blackStatus !== ""
    ) {
      queryParams.BlackStatus = filterParams.blackStatus;
    }

    const response = await api.search(queryParams);

    if (response && response.Data) {
      visitorList.value = response.Data;
    } else {
      visitorList.value = [];
    }
  } catch (error) {
    visitorList.value = [];

    // 显示错误提示
    uni.showToast({
      title: "筛选搜索失败，请稍后重试",
      icon: "none",
      duration: 2000,
    });
  } finally {
    loading.value = false;
  }
};

// 删除访客
const handleDelete = async (item: ISysVisitorInformationView) => {
  try {
    // 调用删除API，传入ID数组
    await api.delete([item.ID!]);

    // 显示成功提示
    uni.showToast({
      title: "删除成功",
      icon: "success",
      duration: 1500,
    });
  } catch (error) {
    // 显示错误提示
    uni.showToast({
      title: "删除失败，请稍后重试",
      icon: "none",
      duration: 2000,
    });
  }
};

// 处理刷新事件
const handleRefresh = () => {
  // 只有在首次加载或明确需要刷新时才调用fetchData
  if (visitorList.value.length === 0) {
    fetchData();
  }
};

// 加载状态
const loading = ref(false);

// 获取数据
const fetchData = async () => {
  loading.value = true;
  try {
    const response = await api.search({});

    if (response && response.Data) {
      visitorList.value = response.Data;
    } else {
      visitorList.value = [];
    }
  } catch (error) {
    visitorList.value = [];

    // 显示错误提示
    uni.showToast({
      title: "获取访客信息失败，请稍后重试",
      icon: "none",
      duration: 2000,
    });
  } finally {
    loading.value = false;
  }
};

// 静默刷新数据获取函数（供XenListPage组件调用）
const silentRefreshFn = async () => {
  const response = await api.search({});
  return response?.Data || [];
};

// 处理静默刷新结果
const handleSilentRefresh = (newData: ISysVisitorInformationView[]) => {
  visitorList.value = newData;
};

// 页面加载
onMounted(() => {
  fetchData();
});
</script>
